{% extends 'Base.html' %}
{% load static %}
{% block pagetitle %}搜索页{% endblock %}
{% block content %}
    <style>
        .card:hover{
            border-color: #ee3f4d;
            box-shadow:0 0 8px rgba(209, 26,45,0.8);
            cursor: default;
        }
    </style>
    <div class="backon">
        <div class="alert alert-warning" role="alert" style="margin-bottom: 2%;">
            共找到有关<b>{{ a }}</b>的结果<b>{{ b }}</b>条：
        </div>

        <div class="resultpage" style="width: 90%;margin-right: auto;margin-left: auto;margin-bottom: 40px;">

            <div class="row" style="background-color: #FF8882;">
                <span style="color: #194350;font-size: 1.5rem;font-weight: bold;">&nbsp;&nbsp;相关电影:</span>
            </div>
            {% for item in movieequalresult %}
                <div class="card" id="movie_li" onclick="searclick(this)" style="width: 100%;margin-top: 1%;">
                    <div class="row">
                        <img class="card-img-top" src="{{item.main_img}}" alt="Card image cap" style="width: 100px;height: 156px;position: relative;left: 15px;">
                        <div class="col-9 m-auto">
                            <div class="topname" name = "movname" style="text-align: left;margin: 1%">{{ item.name }}</div>
                            <div style="text-align: left;margin-left: 1%"><span>主演:{{ item.mainact}}</span></div>
                            <div name ="movtime" style="text-align: left;margin-left: 1%"><span style="opacity: 0.8">上映时间:{{ item.show_time }}</span></div>
                        </div>
                        <div class="col-1 m-auto" style="font-weight: bold;font-size: 2rem;font-style: italic;">{{ item.score }}</div>
                    </div>
                </div>
            {% endfor %}
            {% for item in movielikeresult %}
                <div class="card" id = "movie_li" onclick="searclick(this)" style="width: 100%;margin-top: 1%;">
                    <div class="row">
                        <img class="card-img-top" src="{{item.main_img}}" alt="Card image cap" style="width: 100px;height: 156px;position: relative;left: 15px;">
                        <div class="col-9 m-auto">
                            <div class="topname" name = "movname" style="text-align: left;margin: 1%">{{ item.name }}</div>
                            <div style="text-align: left;margin-left: 1%"><span>主演:{{ item.mainact}}</span></div>
                            <div name ="movtime" style="text-align: left;margin-left: 1%"><span style="opacity: 0.8">上映时间:{{ item.show_time }}</span></div>
                        </div>
                        <div class="col-1 m-auto" style="font-weight: bold;font-size: 2rem;font-style: italic;">{{ item.score }}</div>
                    </div>
                </div>
            {% endfor %}
            <div class="row" style="background-color: #FF8882;margin-top: 1%;margin-bottom: 1%;" >
                <span style="color: #194350;font-size: 1.5rem;font-weight: bold;">&nbsp;&nbsp;相关影院:</span>
            </div>
            {% for item in cinemaresult %}
                <div class="card" id="cinema_li" onclick="searclick(this)" style="width: 100%;margin-top: 1%;">
                    <div class="row">
                        <img class="card-img-top" src="{{item.photodir}}" alt="Card image cap" style="width: 100px;height: 156px;position: relative;left: 15px;">
                        <div class="col-9 m-auto">
                            <div class="topname" name = "movname" style="text-align: left;margin: 1%">{{ item.name }}</div>
                            <div style="text-align: left;margin-left: 1%"><span>电话:{{ item.tel_phone}}</span></div>
                            <div name ="movtime" style="text-align: left;margin-left: 1%">
                                <span style="opacity: 0.8">地址:{{ item.addr }}</span>


                                <a style="text-decoration:none;" href = "{% url 'distance' %}?cinema_name={{ item.name }}" >
                                    <img src="{% static "imag/distance.png" %}" width="40px">
                                    <span>
                                        路线
                                    </span>
                                </a>
                            </div>

                        </div>
                        <div class="col-1 m-auto" style="font-weight: bold;font-size: 2rem;font-style: italic;">{{ item.score }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>




    </div>
    <script>
        function searclick(e){
            id = e.id
            if(id === "movie_li"){
                //http://127.0.0.1:8080/movie/%E9%B8%BF%E9%97%A8%E5%AE%B4%E4%BC%A0%E5%A5%87/20111128/
                name = $(e).find(".topname").text()
                show_time = $(e).find("span").eq(1).text()
                show_time = show_time.slice(5).replaceAll("-","")
                href = window.location.protocol +"//"+window.location.host+"/movie/"+name+"/"+show_time+"/"
                window.location.href = href
            }
            else if(id === "cinema_li"){
                name = $(e).find(".topname").text()
                addr = $(e).find("span").eq(1).text().slice(3)
                href = window.location.protocol +"//"+window.location.host+"/cinema/"+name+"/"+addr+"/"
                window.location.href = href
            }
        }
    </script>

{% endblock %}